<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/self-checking-list1.css" rel="stylesheet">

    <script src="../js/zepto-1.1.4.min.js"></script>
    
    <title>自检</title>
    
  </head>
  <body>
    <!-- 自检 -->
    <div class="self-checking-container">
        <div class="self-checking-head">
            <span class="self-checking-pre">返回</span>
            <p class="self-checking-num">1/20</p>
        </div>

        <div class="self-checking-con">
            <div class="pictureSlider poster-main">
    
            </div>
        </div>

        <div class="self-checking-btn">
            开始自检测验
        </div>
    </div>

    <script src="../js/remset.js"></script>

    <script>
        $(function() {
            var startX,
                startY ,
                moveEndX,
                moveEndY,
                total,
                currentIndex = 1,
                touchFlag = true

            var testList = []

            var _width = $('.self-checking-con').width()
            $('.poster-item').css('width', _width + 'px')
            

            init()


            $('.pictureSlider').on('touchstart', '.poster-item', function(e) {
                e.preventDefault()
                startX = Math.floor(e.originalEvent.changedTouches[0].pageX)
                startY = Math.floor(e.originalEvent.changedTouches[0].pageY)
            })


            $('.pictureSlider').on('touchend', '.poster-item', function(e) {
                e.preventDefault()
                moveEndX = Math.floor(e.originalEvent.changedTouches[0].pageX)
                moveEndY = Math.floor(e.originalEvent.changedTouches[0].pageY)

                var moveX = moveEndX - startX
                var moveY = moveEndY - startY


                // 向上
                if(moveY <= -10) {

                    if(!touchFlag) return
                    touchFlag = false 


                    currentIndex = currentIndex < total ? currentIndex + 1 : 1
                    var pageNum = currentIndex > 9 ? currentIndex : '0' + currentIndex

                    for(var i = 1; i < 6; i++) {
                        $('.poster-item:nth-child(' + i + ')').addClass('droptop'+ i)
                    }

                    setTimeout(function() {

                        for(var i = 1; i < 6; i++) { 
                            $('.poster-item:nth-child('+i+')').removeClass('droptop'+ i)
                        }

                        $('.poster-item:nth-child(1) .poster-num').text(pageNum)
                        $('.poster-item:nth-child(1) .poster-title').text(testList[currentIndex - 1].selfCheckName)


                        $('.poster-item:nth-child(1) .poster-num').text(pageNum)
                        $('.poster-item:nth-child(1) .poster-title').text(testList[currentIndex - 1].selfCheckName)


                        var nextIndex = currentIndex + 1 > total ? 1 : currentIndex + 1
                        var nextNum = nextIndex > 9 ? nextIndex : '0' + nextIndex

                        $('.poster-item:nth-child(2) .poster-num').text(nextNum)
                        $('.poster-item:nth-child(2) .poster-title').text(testList[nextIndex - 1].selfCheckName)
                        
                        touchFlag = true

                    }, 700)
                    
                    $('.self-checking-num').text(currentIndex + '/' + total)
                }

                
                // 向下
                if(moveY >= 10) {
                    if(!touchFlag) return
                    touchFlag = false


                    if(currentIndex == 1) {
                        currentIndex = total
                    } else {
                        currentIndex = currentIndex - 1
                    }

                    var pageNum = currentIndex > 9 ? currentIndex : '0' + currentIndex

                    for(var i = 1; i < 6; i++) {
                        $('.poster-item:nth-child(' + i + ')').addClass('dropBottom'+ i)
                    }

                    
                    $('.poster-item:nth-child(5) .poster-num').text(pageNum)
                    $('.poster-item:nth-child(5) .poster-title').text(testList[currentIndex - 1].selfCheckName)

                    setTimeout(function() {

                        for(var i = 1; i < 6; i++) {
                            $('.poster-item:nth-child('+i+')').removeClass('dropBottom'+ i)
                        }

                        $('.poster-item:nth-child(1) .poster-num').text(pageNum)
                        $('.poster-item:nth-child(1) .poster-title').text(testList[currentIndex - 1].selfCheckName)

                        var nextIndex = currentIndex + 1 > total ? 1 : currentIndex + 1
                        var nextNum = nextIndex > 9 ? nextIndex : '0' + nextIndex

                        $('.poster-item:nth-child(2) .poster-num').text(nextNum)
                        $('.poster-item:nth-child(2) .poster-title').text(testList[nextIndex - 1].selfCheckName)

                        touchFlag = true
                    }, 700)
                    
                    $('.self-checking-num').text(currentIndex + '/' + total)
                }
            })



            // 返回
            $('.self-checking-pre').click(function() {
                history.go(-1)
            })



            // 开始检测
            $('.self-checking-btn').click(function() {
                window.location.href = $("#contextPath").val() + "/selfcheck/detail"
            })

            

            function init() {
                var obj = new Object();
            	obj.pageNums = 0;
    			$.ajax({
    				type : "Post",
    				url : $("#contextPath").val() + "/selfcheck/query",
    				data : JSON.stringify(obj),
    				dataType : "json",
    				accept : "application/json",
    				contentType : "application/json",
    				success : function(result) {
    					if (result.isSuccess) {
                            var data = result.data,
                                initDOM = '';
                                total = data.total;
                                testList = data.list;
                                total = testList.length;
    						
    			            var scale = 1.04
                            var _index = 100
                            var _opacity = 1.08

                            for(var i = 0; i < 5; i++) {
                                scale = scale - 0.04
                                _index = _index - 1
                                _opacity -= 0.08

                                var item = '<div class="poster-item  zturn-item"' + 
                                                'style="transform: scale('+scale+'); transition-duration: 0.5s; z-index: '+_index+';top:'+(i*15)+'px;width:'+_width+'px;opacity:'+_opacity+';"' + '>' +
                                                '<p class="poster-num">0' + (i + 1) +'</p>' +
                                                '<p class="poster-title">'+ testList[i].selfCheckName +'</p>' +
                                            '</div>'
                                initDOM += item
                            }

                            $('.pictureSlider').append(initDOM)
                            $('.self-checking-num').text(currentIndex + '/' + total)
    					}
    				},
    				error : function(jqXHR, textStatus, errorThrown) {
    					console.log('服务繁忙,请稍后再试');
    				}
    			})
            }            

        })
    </script>
  </body>
</html>